import React, { Component } from 'react'
import {
  View,
  StyleSheet
} from 'react-native'

import { connect } from 'react-redux'

import Navigator from './navigator'
import Toast from '../../components/common/toast'
import Loading from '../../components/common/loading'

const styles = StyleSheet.create({
  container: {
    // justifyContent: 'flex-start',
    // alignItems: 'stretch',
    backgroundColor: 'transparent',
    // backgroundColor: '#ff99aa',
    position: 'absolute',
    left: 0,
    right: 0,
    bottom: 0,
    top: 0
  }
})

class App extends Component {
  constructor (props) {
    super(props)
    this.displayName = 'App'
  }

  render () {
    const {
      toast,
      showLoading
    } = this.props
    console.log('===showLoading=', showLoading)
    return (
      <View style={styles.container}>
        <Navigator />
        {(() => {
          if (showLoading) {
            return (
              <Loading />
            )
          }
        })()}
        {(() => {
          if (toast.get('show')) {
            return (
              <Toast
                type={toast.get('type')}
                text={toast.get('text')}
              />
            )
          }
        })()}
      </View>
    )
  }
}

App.propTypes = {
}

function mapStateToProps (state) {
  const {
    toast,
    loading
  } = state
  return {
    toast,
    showLoading: loading.get('count') > 0
  }
}

function mapDispatchToProps (dispatch) {
  return {
    dispatch
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(App)
